import {
  View,
  Text,
  Image,
  TouchableWithoutFeedback,
  TouchableOpacity,
} from "react-native";
import { R } from '../../../core';
import {IconFont } from 'enoad-common/src/index';
import { EnoadBaseModule } from "../../index";
import { v4 as uuidv4 } from "uuid";
import React from "react";
import _, { parseInt } from "lodash";

export default class StoreShopCard extends EnoadBaseModule {
  constructor(config: string) {
    super(config);
  }
  /**
   * 获取每一行的布局和操作信息
   * @param componentId 唯一识别
   * @param item 数据
   * @param showItems 更多布局
   * @param actions 操作
   * @returns
   */
  getDataWithLayout(
    componentId: string,
    item: any,
    showItems: any,
    actions: any
  ) {
    //先展示图片字段
    let image;
    let other = new Array();
    _.forEach(showItems.showItems, (itemLayout: any) => {
      if (itemLayout.itemType == 29) {
        image = this.getItemView(item, itemLayout);
      } else {
        other.push(this.getItemView(item, itemLayout));
      }
    });
    let more = new Array();
    for (let i = 0; i < other.length; i++) {
      if (i == 6) {
        break;
      }
      if (other[i + 1]) {
        i++;
        more.push(
          <View key={uuidv4()} style={{ flexDirection: "row", flex: 1 }}>
            {other[i]}
            {other[i + 1]}
          </View>
        );
      } else {
        more.push(
          <View key={uuidv4()} style={{ flexDirection: "row", flex: 1 }}>
            {other[i]}
            <View style={{ flex: 1 }}></View>
          </View>
        );
      }
    }
    return (
      <View
        key={uuidv4()}
        style={[
          R.styles.schadule_bord,
          { flexDirection: "row", alignItems: "center", borderRadius: 8 },
        ]}
      >
        <IconFont name={"xuanze1"} size={24} color={"#C5CBD6"} />
        <View style={{ flexDirection: "column", padding: 15, flex: 1 }}>
          <View style={{ flexDirection: "row", paddingBottom: 8 }}>
            {image}
            <View
              style={{
                flexDirection: "column",
                flex: 1,
                paddingLeft: 15,
              }}
            >
              <Text
                style={{
                  color: "#182437",
                  fontSize: 14,
                  fontFamily: "PingFangSC-Regular",
                }}
                numberOfLines={3}
              >
                {
                  "可口可乐可口可乐可口可乐可口可乐可口可乐可口可乐可可口可乐可口可乐可口可乐口…可乐可口可乐可口可乐可口可乐可口可乐可可口可乐可口可乐可口可乐"
                }
              </Text>
              <Text
                style={{
                  position: "absolute",
                  paddingLeft: 15,
                  bottom: 0,
                  height: 26,
                  lineHeight: 26,
                  color: "#FF7D00",
                  fontSize: 14,
                  fontFamily: "PingFangSC-Regular",
                }}
              >
                {"¥ 999,999,999.00"}
              </Text>
            </View>
          </View>
          <View style={{ paddingBottom: 8, flexDirection: "row" }}>
            <Text
              style={{ borderRadius: 5, backgroundColor: "#FF9600",color:"#ffffff",fontSize:10 ,padding:3,marginRight:3,}}
            >
              {"这个折扣"}
            </Text>
            <Text
              style={{ borderRadius: 5, backgroundColor: "#FF9600",color:"#ffffff",fontSize:10,padding:3,marginRight:3}}
            >
              {"这是一堆字"}
            </Text>
            <Text
              style={{ borderRadius: 5, backgroundColor: "#FF9600",color:"#ffffff",fontSize:10,padding:3,marginRight:3}}
            >
              {"这是一堆字的标签…"}
            </Text>
            <Text style={{color:"#1D77FF",fontSize:13}}>{"…共7个"}</Text>
          </View>
          <View
            style={[
              R.styles.schadule_bord,
              { borderColor: R.color.white, padding: 0 },
            ]}
          >
            {more}
          </View>
          <View
            style={{
              flexDirection: "row",
              paddingTop: 10,
              alignItems: "center",
            }}
          >
            <View
              style={{
                flexDirection: "row",
                borderColor: "#FFEDEEF2",
                borderWidth: 1,
                alignItems: "center",
                height: 30,
              }}
            >
              <TouchableOpacity onPress={() => {}}>
                <IconFont name={"minus"} size={24} color={"#6A7280"} />
              </TouchableOpacity>
              <Text
                style={{
                  borderColor: "#FFEDEEF2",
                  width: 60,
                  borderLeftWidth: 1,
                  borderRightWidth: 1,
                  textAlign: "center",
                  lineHeight: 30,
                }}
              >
                {999999}
              </Text>
              <TouchableOpacity onPress={() => {}}>
                <IconFont name={"jia"} size={24} color={"#6A7280"} />
              </TouchableOpacity>
            </View>
            <View style={{ flex: 1 }} />
            <TouchableOpacity style={{ paddingLeft: 15,paddingRight:15,backgroundColor:"#F3F4F6",borderRadius:5 ,height: 30,justifyContent:"center",marginRight:15 }} onPress={() => {}}>
              <IconFont name={"bianji"} size={15} color={"#182437"} />
            </TouchableOpacity>
            <TouchableOpacity style={{ paddingLeft: 15,paddingRight:15,backgroundColor:"#F3F4F6",borderRadius:5 ,height: 30,justifyContent:"center" }} onPress={() => {}}>
              <IconFont name={"lajitong"} size={20} color={"#182437"} />
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }

  getItemView(data: any, itemLayout: any) {
    if (itemLayout.itemType == 29) {
      //图片字段；
      let url = data[`${itemLayout.apiKey}`];
      if (url) {
        let urlJson = JSON.parse(url);
        if (urlJson && urlJson.length > 0) {
          url = urlJson[0];
        }
        if (url) {
          return (
            <View key={data.id + uuidv4()}>
              <Image
                style={{ height: 90, width: 90 }}
                resizeMode={"cover"}
                source={{ uri: url }}
              />
            </View>
          );
        }
      }
    } else {
      return (
        <View
          key={data.id + uuidv4()}
          style={{ flexDirection: "column", flex: 1, paddingBottom: 8 }}
        >
          <Text
            numberOfLines={1}
            style={{
              color: "#9DA5B3",
              fontSize: 13,
              fontFamily: "PingFangSC-Regular",
            }}
          >
            {itemLayout.label}
          </Text>
          <Text
            numberOfLines={1}
            style={{
              color: "#182437",
              fontSize: 13,
              fontFamily: "PingFangSC-Regular",
            }}
          >
            {data[`${itemLayout.apiKey}`]}
          </Text>
        </View>
      );
    }
  }
}
